import { ref } from 'vue'
import * as echarts from 'echarts'

export function useInnovationCostChart() {
    const innovationCostChart = ref(null)

    // 初始化图表的通用函数
    const initChart = (chartRef, option) => {
        if (!chartRef.value) return
        const chart = echarts.init(chartRef.value)
        chart.setOption(option)

        // 添加响应式调整
        window.addEventListener('resize', () => {
            chart.resize()
        })

        return chart
    }

    // 图表8：创新与成本控制 - 双Y轴折线图
    const initInnovationCostChart = async (data) => {
        let months = [];
        let innovationCounts = [];
        let costReductionRates = [];
        for (let item of data) {
            months.push(item.months);
            innovationCounts.push(item.innovationCounts);
            costReductionRates.push(item.costReductionRates);
        }

        const sortedMonths = months;
        const innovationData = innovationCounts;
        const costData = costReductionRates;

        const option = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                borderColor: '#1890ff',
                textStyle: { color: '#fff' },
                formatter: (params) => {
                    let result = `${params[0].name}<br/>`
                    params.forEach(param => {
                        const unit = param.seriesName === '创新数量' ? '项' : '%'
                        result += `${param.marker} ${param.seriesName}: ${param.value}${unit}<br/>`
                    })
                    return result
                }
            },
            legend: {
                data: ['创新数量', '成本降低率'],
                textStyle: { color: '#fff', fontSize: 12 },
                top: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                top: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: sortedMonths,
                axisLabel: { color: '#fff', fontSize: 11 },
                axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '创新数量',
                    nameTextStyle: { color: '#fff' },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 11,
                        formatter: '{value}'
                    },
                    axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } },
                    splitLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.1)' } }
                },
                {
                    type: 'value',
                    name: '成本降低率(%)',
                    nameTextStyle: { color: '#fff' },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 11,
                        formatter: '{value}%'
                    },
                    axisLine: { lineStyle: { color: 'rgba(64, 158, 255, 0.3)' } },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '创新数量',
                    type: 'bar',
                    data: innovationData,
                    itemStyle: { color: '#1890ff' }
                },
                {
                    name: '成本降低率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: costData,
                    smooth: true,
                    itemStyle: { color: '#722ed1' },
                    lineStyle: { width: 3 },
                    symbol: 'circle',
                    symbolSize: 6
                }
            ]
        }

        initChart(innovationCostChart, option)
    };

    return {
        innovationCostChart,
        initInnovationCostChart
    }
}
